<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>产品详情</title>
    <meta name="viewport"
          content="width=view-width,height=view-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/idangerous.swiper.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/style.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_418523_c8acn1ncpyi7ldi.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_3mgu42g42easjor.css">
    <style>
        .offline-item {
            background: #FFFFFF;
            border-bottom: 1px solid #dadada;
            padding: 0 15px 10px;

        }

        .offline-item h1 {
            font-size: 14px;
            font-weight: normal;
            height: 44px;
            line-height: 44px;
            text-overflow: ellipsis;
        }

        .offline-item p {
            margin-top: 5px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
        }

        .card {
            margin: 0;
            margin-bottom: 15px;
        }

        .swiper-wrapper {
            max-height: 250px;
            height: auto;
        }

        .swiper-slide {
            max-height: 250px;
            width: 100%;
        }

        .card .list-block {
            width: 100%;
        }

        .swiper-slide img {
            width: 100%;
        }

        .red-slide {
            background: #ca4040;
        }

        .blue-slide {
            background: #4390ee;
        }

        .orange-slide {
            background: #ff8604;
        }

        .green-slide {
            background: #49a430;
        }

        .pink-slide {
            background: #973e76;
        }

        .spec-popup .sku-pro > div img {
            width: 125px;
            height: 125px;
            top: -30px;
            border-radius: 5px;
            border: 1px solid #cccccc;

        }

        .spec-popup .sku-pro > div .sku-pro-info {
            width: auto;
        }

        .bar-tab .tab-item .badge {
            height: .7rem;
            min-width: .7rem;
            line-height: .7rem;
            font-size: 12px;
            -webkit-transform: scale(0.84, 0.84);
        }

        #goodsDet-tab {
            padding: 0.75rem;
            position: relative;
        }

        #goodsDet-tab img {
            width: 100%;
            max-height: 250px;
        }

        .bar-nav ~ .content {
            top: 0;
        }

        .spec-popup {
            height: 60%;
            top: 40%;
            overflow: visible;
        }

        .popup-overlay {
            height: 0;
        }

        .swiper-container {
            margin-top: 45px;
        }

        .spec-popup .sku-pro {
            margin-bottom: 15px;
        }

        .spec-popup .sku-pro > div {
            border: none;
        }

        .sku-info div {
            border: none;
        }

        .spec-popup .g-num {
            padding: 10px 0;
            line-height: 1.25rem;
        }

        .spec-popup .quantity-info .reduce, .spec-popup .quantity-info .plus, #bookNum {
            width: 1.8rem;
            height: 1.8rem;
            line-height: 1.8rem;
        }

        #bookNum {
            font-size: 14px;
        }

        .select-size {
            font-size: 14px;
        }

        .list-block .item-link .item-inner {
            background: url("${staticpath}/front/dist/images/rightArrow.png") no-repeat 100% 50%;
            background-size: 0.5rem;
        }
        #car-badge{
                   margin:0;
               }
    </style>
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <!--搜索栏内容 !-->
        <header class="bar bar-nav" id="header">
            <button class="button button-link button-nav pull-left" style=" font-style: 14px; padding-left: 0.75rem;color: #3d4145"
                   id="back">
                <span class="icon icon-left"></span>
            </button>
            <button class="car-btn button button-link button-nav pull-right iconfont icon-gouwuche"
                    style="font-size: 20px; padding:0;color: #3d4145" id="car-badge">
            </button>
            <h1 class="title">商品详情</h1>
        </header>
        <!--内容部分 !-->
        <div class="content product-content">
            <!--列表页面 !-->
            <!-- 幻灯片Slider -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 商品详情 -->
            <div class="product-card card ">
            </div>
            <!-- 促销信息 -->
            <!-- 数量信息 -->
            <div class="please-card card">
                <div class="card-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="#" class="item-link item-content" id="specBtn">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <input type="hidden" class="productID">

                                        <div class="item-title"><span class="select-size">选择规格</span></div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 数量信息弹出框 -->

            <!-- 标签页 -->
            <div class="div-prompt">
                <span style="white-space:pre">   </span><span class="line"></span>
                <span style="white-space:pre">   </span><span class="txt">继续拖动，查看图文详情</span>
                <span style="white-space:pre">   </span><span class="line"></span><span
                    style="white-space:pre">   </span>

                <div></div>
                <!-- <span></span> -->
            </div>
            <div class="tabs">
                <h1>商品详情</h1>

                <div id="goodsDet-tab" class="tab active">
                </div>
            </div>

        </div>
        <nav class="bar bar-tab" id="tool-bar">
            <a class="tab-item" id="joinBtn">加入购物车</a>
            <a href="#" class="tab-item" id="purBtn">立即购买</a>
        </nav>
        <input type="hidden" value="no" id="refreshed">
    </div>
</div>
<div class="spec-popup  popup popup-about">
    <div class="ctrl-ui-sku">
        <div class="sku-pro">
            <div>
                <img id="productImg">

                <div class="sku-pro-info">
                    <div>
                        <input type="hidden" class="specId">

                        <p class="price">¥<span class="pop-price">124</span></p>

                        <p class="quantity"><label class="label">库存</label>:<span
                                class="pop-stock">2694</span></p>

                        <p class="select-size">请选择规格尺寸</p>
                    </div>
                </div>
                <div class="close-popup"><span class="icon iconfont icon-guanbi"></span></div>
            </div>
        </div>
        <div class="sku-info">
            <div class="sku-spec">
            </div>
            <div class="underline"></div>
            <h2 class="g-num">
                <div class="buynum cell-left">购买数量</div>

                <div class="quantity-info">
                    <a class="btn reduce" min="1" id="sub" href="javascript:void(0);">-</a>
                    <input type="text" min="1" value="1" id="bookNum" readonly/>
                    <a class="btn plus cell-right" max="1366">+</a>
                </div>
            </h2>
            <div class="underline"></div>
        </div>
        <p class="buttons-row p-inner">
            <a href="#" id="joinCartBtn">加入购物车</a>
            <a href="#" id="purchaseBtn" class="p-pur not">立即购买</a>
        </p>

        <p class="buttons-row p-out">
            <a href="#" id="confirmJoin">确定</a>
        </p>

        <p class="buttons-row p-pur">
            <a href="#" id="purBuy" data-url="${basepath}/rest/front/order/toProductOrderDetail">立即购买</a>
        </p>
    </div>
</div>
<div class="expand"></div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/idangerous.swiper.min.js' charset='utf-8'></script>
<script>$.config = {router: false}</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/product/productDetail.js' charset='utf-8'></script>
<script>$.init()</script>
<script>

</script>
</body>
</html>
